<!-- 商品详情 -->
<template>
	<view>
		<!-- 头部 -->
		<u-navbar autoBack placeholder>
			<view slot="center">
				<u-tabs :list="goodsTitle" lineColor="#72ae71" @click="tabsChange"></u-tabs>
			</view>
		</u-navbar>
		<!-- 轮播图 -->
		<u-swiper :list="list" @change="listChange" :autoplay="true" indicatorStyle="right: 20px" circular
			height="702rpx" radius="0">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list.length }}</text>
			</view>
		</u-swiper>

		<!-- 商品现价、原价与月销量 -->
		<!-- <view class="bg-white p-2" > -->
		<view>
			<view style="height: 85rpx;background-color: #89bd89;padding: 24rpx;">
				<view class="flex justify-between font-30" style="color: #fff;">
					<view class="flex align-end">
						<commonPrice :price="dataInfo.goods_price" :color="'#fff'" :size="50" :newsize="32">
						</commonPrice>
						<view class="ml-2" style="text-decoration: line-through;">￥{{dataInfo.line_price}}</view>
					</view>
					<view class="flex align-end">
						月销量{{dataInfo.sale}}
					</view>
				</view>
			</view>
			<view class="text-black" style="background-color: #fff;font-size: 36rpx;padding: 24rpx;
			display: flex;align-items: center;justify-content: space-between;">
				<view class="flex-1">{{dataInfo.goods_name}}</view>
				<view class="flex flex-column align-center justify-center" @click="onClick(1)">
					<u-icon :name="dataInfo.is_collect===1?'star-fill':'star'"
						:color="dataInfo.is_collect===1?'#f5e38e':''" labelPos="bottom"
						:label="dataInfo.is_collect===1?'已收藏':'收藏'" size="25"></u-icon>
						<!-- <u-icon :name="dataInfo.is_collect===1?'star-fill':'star'"
							:color="dataInfo.is_collect===1?'#f5e38e':''" size="30"></u-icon> -->	
				</view>
			</view>	
		</view>

		<!-- 用户评价 -->
		<!-- <view id="commentCount" class="bg-white p-2 " style="margin-top: 6rpx;" >
			<view class="flex align-center">
				<view class="font-28 text-main">用户评价({{dataInfo.comment_count}})</view>
				<view class="ml-auto">
					<u-text suffixIcon="arrow-right" text="查看全部" size="12"
						:iconStyle="{color:'#757575'}" @click="$u.route('pages/index/evaluate',{goodId:dataInfo.goods_id})"></u-text>
				</view>
			</view>
		
			<view class="mt-2" v-if="dataInfo.comment_count>0">
				<view class="flex align-center">
					<u-avatar :src="commentItem.avatar" size="27" shape="circle"></u-avatar>
					<view class="ml-2">
						<view class="font-24 font-weight-bold">{{commentItem.nickname}}</view>
						<view class="font-small text-light9">{{commentItem.createtime}}</view>
					</view>
				</view>
		
				<view class="mt-2">
					<u-text
						:text="commentItem.comment"
						lines="3" bold></u-text>
				</view>
				
				<template v-if="commentItem.images && commentItem.images.length > 0">
				    <u-grid :col="3":border="false">
				    	<u-grid-item :custom-style="{'padding-bottom':0}" v-for="(item,index) in commentItem.images" :key="index">
				    		<image :src="item"  style="width: 202rpx;height: 202rpx;"></image>	
				    	</u-grid-item>
				    </u-grid>
				</template>
		
			</view>
		</view> -->
		<!-- 商品详情文本 -->
		<view id="goodsDetails" class="bg-white p-2"
			style="display:flex; justify-content: center; margin-top: 6rpx; font-weight: bold;font-size: 30rpx;">
			<!-- 字体大小 -->
			<u-icon name="minus" color="#191919"></u-icon>
			<text style="margin: 0 10rpx; font-size: 26rpx;">商品详情</text>
			<u-icon name="minus" color="#191919"></u-icon>
		</view>
		<!-- 商品详情内容 -->
		<view class="pt-2 flex flex-column">
			<u-parse :content="dataInfo.content"></u-parse>
		</view>
		<!--  -->
		<view class="" style="height: 150rpx;"></view>
		<!-- 底部操作 -->
		<view class="fixed-bottom flex align-center justify-between bg-white px-2" style="height: 150rpx;">
			<view class=" flex flex-column align-center justify-center" @click="goToUrl('/pages/user/customer-service')">
				<image class="contact-icon-image" src="../../static/pay/kefu.png" mode=""></image>
			</view>

			<view class="flex align-center">
				<view class="cart flex align-center justify-center ml-4" @click="buyNow" style="border-radius: 40rpx;">加入购物车
				</view>
				
				<view class="buy flex align-center justify-center ml-2" @click="buyNow" style="border-radius: 40rpx;">立即购买
				</view>
			</view>
		</view>
		<!-- 弹出层 -->
		<!-- <u-popup :show="addressShow" closeable @close="addressShow=false" height="500rpx">
			<view class="p-2" style="background: #f5f5f5; height: 500rpx;">
				<view class="flex align-center">
					<view class="font-sm" style="color: #04BF79;" @click="addaddress">新增地址</view>
					<view class="font-30 text-main font-weight-bold" style="margin-left: 140rpx;">选择收货地址</view>
					<view class="" style="margin-left: 250rpx;">
						<u-icon name="close" size="22" @click="addressShow=false"></u-icon>
					</view>
				</view>

				<view class="flex align-center p-2 border-bottom bg-white mt-2" v-for="(item,index) in pathList"
					@click="chooseAddress(item,index)">
					<view class="">
						<view class="flex align-center">
							<view class="text-main font-30 font-weight-bold">{{item.name}}</view>
							<view class="text-light6 font-sm ml-2">{{item.phone}}</view>
							<view v-if="item.isdefault==='1'" class="default flex align-center justify-center ml-2">默认</view>
						</view>
						<view class="font-24 text-light6 mt-2">{{item.Area.province+item.Area.city+item.Area.region+item.detail}}</view>
					</view>
					<view class="ml-auto" v-if="addressIndex===index">
						<u-icon name="checkbox-mark" color="#04BF79"></u-icon>
					</view>
				</view>
			</view>
		</u-popup> -->
		<!-- 下方购物车、立即购买弹框 -->
		<u-popup :show="show" round="20" closeable @close="show=false">
			<view class="bg-white p-2" style="height: 800rpx;">
				<view class="flex align-start">
					<u-image :src="goodsCheck.spec_image?goodsCheck.spec_image:goodsImage" width="152rpx"
						height="152rpx"></u-image>
					<view class="ml-2">
						<commonPrice
							:price="dataInfo.spec_type==='10'?dataInfo.goods_price: goodsCheck.goods_price?goodsCheck.goods_price:0">
						</commonPrice>
					</view>
				</view>

				<view class="flex align-center justify-between mt-2">
					<view class="text-main font-30 font-weight-bold">数量</view>
					<u-number-box v-model="num"></u-number-box>
				</view>

				<view class="px-2">
					<view class="mt-2" v-for="(item,index) in goodsInfo.goods_spec" :key="index">
						<view class="mt-2">{{item.spec_name}}</view>
						<view class="row mt-2">
							<view class="p-2 mx-2 my-1 flex align-center justify-center flex-column"
								style="border-radius: 10rpx;"
								v-for="(items,indexs) in goodsInfo.goods_spec_value[index]"
								@click="changeSpecActive(items.id,index,items.spec_value)"
								:class="[activeType.indexOf(items.id)>=0?'active':'inactive']" :key="indexs">
								<view class="mb-2" v-if="items.spec_image">
									<u-image :src="items.spec_image" width="216rpx" height="208rpx"></u-image>
								</view>
								<view class="font-24">{{items.spec_value}}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="flex mt-2 align-center fixed-bottom mb-5">
					<view class="cartplus flex align-center justify-center ml-1 w-50" @click="addcart">加入购物车
					</view>
					<view class="buyplus flex align-center justify-center w-50" @click="goconfirm">立即购买</view>
				</view>


			</view>
		</u-popup>

		<u-loading-page :loading="loadshow"></u-loading-page>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentNum: 0,
				list: [],
				show: false,
				addressIndex: 0,
				addressShow: false,
				num: 1,
				activeType: [],
				activetitleType: [],
				goodsItem: [],
				dataInfo: {},
				goodsInfo: {},
				path: '',
				pathList: [],
				comments: [],
				commentItem: '',
				goodsImage: '',
				loadshow: true,
				goodsId: '',
				goodsTitle: [{
						name: '商品'
					}
				],
				style: {
					img: 'margin-top: -9rpx;'
				},
				scrollTop: 0,
				current: 0, // tabs索引
				commentCount: {
					top: 0,
					height: 0
				},
				goodsDetails: {
					top: 0,
					height: 0
				},
				user_info: {
					'invite_code': ''
				},
			}
		},
		computed: {
			goodsCheck() {
				let check = ''
				this.goodsItem.map((item) => {
					if (item.spec_sku_id === this.activeType.join('_')) {
						check = item
					}
				})
				return check
			}

		},
		onLoad(options) {
			this.goodsId = options.goodsId
			this.getDetail(options.goodsId)
			let invite_code = '';
			if (options && options.invite_code) {
				invite_code = options.invite_code
			}
			//获取来源
			if (options && options.scene) {
				//params转 obj  字符串参数  a=123&b=456 转 {a:"123",b:"456"}
				var query = this.getRequestParameters(decodeURIComponent(options.scene))
				invite_code = query.invite_code
			}
			if (invite_code) {
				uni.setStorageSync('invite_code', invite_code)
			}
		},
		onShow() {
			this.getDefultAddress()
			let user_info = uni.getStorageSync('userinfo')
			if (user_info) {
				this.user_info = user_info
			}
		},
		//转发给朋友
		// onShareAppMessage(res) {
		// 	return {
		// 		title: '五金',
		// 		path: 'pages/index/detail?invite_code=' + this.user_info.invite_code + '&goodsId=' + this.goodsId
		// 	}
		// },

		// //分享朋友圈
		// onShareTimeline(res) {
		// 	return {
		// 		title: '五金',
		// 		path: 'pages/index/detail',
		// 		query: 'invite_code=' + this.user_info.invite_code + '&goodsId=' + this.goodsId,
		// 	}
		// },
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
			uni.createSelectorQuery().select('#commentCount').boundingClientRect(rect => {
				this.commentCount.top = rect.top
				this.commentCount.height = rect.top + rect.height
			}).exec()
			uni.createSelectorQuery().select('#goodsDetails').boundingClientRect(rect => {
				this.goodsDetails.top = rect.top
				this.goodsDetails.height = rect.top + rect.height
			}).exec()
			if (this.goodsDetails.top <= 44) {
				if (this.goodsDetails.height >= 44) {
					this.current = 2
				}
			} else if (this.commentCount.top <= 44) {
				if (this.commentCount.height >= 44) {
					this.current = 1
				}
			} else {
				this.current = 0
			}
		},
		methods: {
			goToUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			getRequestParameters(params = "") {
				let theRequest = new Object();
				if (params != undefined) {
					let strs = params.split("&");
					for (let i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
					}
				}
				return theRequest;
			},
			getDetail(goodsId) {
				this.$api.goodDetail({
					good_id: goodsId
				}).then(res => {
					if (res.code === 1) {
						this.dataInfo = res.data
						this.list = res.data.images
						this.goodsImage = res.data.images[0]
						if (res.data.comment_count > 0) {
							this.commentItem = res.data.goods_comment[0]
						}
						setTimeout(() => {
							this.loadshow = false
						}, 1000)

					}
				})
			},
			getDefultAddress() {
				this.$api.addresslists().then(res => {
					if (res.code === 1) {
						if (res.data) {
							this.path = res.data[0]
							this.pathList = res.data
						}
					}
				})
			},
			chooseAddress(item, index) {
				this.addressIndex = index
				this.addressShow = false
				this.path = item
			},
			addaddress() {
				this.addressShow = false
				uni.$u.route('pages/my/path', {
					type: 'choose'
				})
			},

			listChange(e) {
				this.currentNum = e.current
			},
			changeSpecActive(id, index, specValue) {
				if (this.activeType[index]) {
					if (id == this.activeType[index]) {
						this.activeType[index] = ''
					} else {
						this.activeType[index] = ''
						this.activeType[index] = id
					}
				} else {
					this.activeType[index] = id
				}
				this.activeType = [...this.activeType]

				if (this.activetitleType[index]) {
					if (specValue == this.activetitleType[index]) {
						this.activetitleType[index] = ''
					} else {
						this.activetitleType[index] = ''
						this.activetitleType[index] = specValue
					}
				} else {
					this.activetitleType[index] = specValue
				}
				this.activetitleType = [...this.activetitleType]

			},
			onClick(e) {
				if (e === 1) {
					this.$api.addCollect({
						goods_id: this.dataInfo.goods_id
					}).then(res => {
						if (res.code === 1) {
							this.getDetail(this.dataInfo.goods_id)
						}
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}

			},
			buyNow() {
				this.show = true
				this.$api.buyNow({
					good_id: this.dataInfo.goods_id
				}).then(res => {
					if (res.code === 1) {
						this.goodsInfo = res.data
						this.goodsItem = res.data.goods_item
						this.goodsInfo.goods_spec.forEach((item, index) => {
							this.activeType[index] = this.goodsInfo.goods_spec_value[index][0].id
							this.activetitleType[index] = this.goodsInfo.goods_spec_value[index][0]
								.spec_value
						})
					}
				})

			},
			addcart() {
				
				if (!this.goodsCheck) return

				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else {
					this.$api.addCart({
						item_id: this.goodsCheck.goods_spec_id,
						goods_num: this.num
					}).then(res => {
						if (res.code === 1) {
							uni.showToast({
								title: '添加购物车成功',
								icon: 'none'
							});
							this.show = false
						}
					})
				}
			},
			goconfirm() {
				if (!this.goodsCheck) return
				if (uni.$u.test.isEmpty(uni.getStorageSync('token'))) {
					return uni.navigateTo({
						url: '/pages/login/login'
					})
				}


				if (!this.path) {
					return uni.showModal({
						title: '提示',
						content: '无收货地址,请创建收货地址',
						showCancel: true,
						cancelText: '取消',
						confirmText: '创建',
						success: res => {
							if (res.confirm) {
								uni.$u.route('pages/user/path')
							}
						}

					});
				}
				this.show = false
				let indexs = ''
				let item_id = ''
				this.activeType.map((item, index) => {
					if (!item && indexs === '') {
						indexs = index
					}
				})
				if (indexs !== '') {
					uni.showToast({
						title: '请选择' + this.goodsInfo.goods_spec[indexs].spec_name,
						icon: 'none'
					})
					return
				}
				this.goodsInfo.goods_item.map((item) => {
					if (item.spec_sku_id == this.activeType.join('_')) {
						item_id = item.goods_spec_id
					}
				})


				let goodsSpec = {
					goods_name: this.dataInfo.goods_name,
					goods_num: this.num,
					image: this.dataInfo.images[0],
					goods_id: this.dataInfo.goods_id,
					item_id: item_id,
					price: this.goodsCheck.goods_price,
					goodsSpec: this.activetitleType.join('      ')
				}

				uni.$u.route('pages/index/confirm', goodsSpec)
			},
			tabsChange(item) {
				if (item.index === 0) {
					// 商品
					uni.pageScrollTo({
						scrollTop: 0
					})
				} else if (item.index === 1) {
					uni.createSelectorQuery().select('#commentCount').boundingClientRect(rect => {
						uni.pageScrollTo({
							scrollTop: rect.top - 44 + this.scrollTop
						})
					}).exec()
				} else if (item.index === 2) {
					uni.createSelectorQuery().select('#goodsDetails').boundingClientRect(rect => {
						uni.pageScrollTo({
							scrollTop: rect.top - 44 + this.scrollTop
						})
					}).exec()
				}
			}
		}
	}
</script>

<style lang="scss">
	.contact-btn{
		border: none !important;
	}
	.contact-icon-image{
		width: 60rpx;
		height: 60rpx;
		flex-shrink: 0;
		// margin-top: 35rpx;
	}
	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.cart {
		width: 248rpx;
		height: 76rpx;
		background: #E9FFF7;
		border-radius: 160rpx 0rpx 0rpx 160rpx;
		opacity: 1;
		border: 2rpx solid #04BF79;
		color: #04BF79;
		font-size: 26rpx;
	}

	.cartplus {
		height: 76rpx;
		background: #E9FFF7;
		border-radius: 160rpx 0rpx 0rpx 160rpx;
		opacity: 1;
		border: 2rpx solid #04BF79;
		color: #04BF79;
		font-size: 26rpx;

	}

	.buy {
		width: 248rpx;
		height: 82rpx;
		background: linear-gradient(88deg, #04BF79 0%, #02BC6B 100%);
		border-radius: 0rpx 160rpx 160rpx 0rpx;
		opacity: 1;
		color: #FFFFFF;
		font-size: 26rpx;
	}

	.buyplus {
		height: 82rpx;
		background: linear-gradient(88deg, #04BF79 0%, #02BC6B 100%);
		border-radius: 0rpx 160rpx 160rpx 0rpx;
		opacity: 1;
		color: #FFFFFF;
		font-size: 26rpx;

	}

	.default {
		width: 64rpx;
		height: 40rpx;
		background: #E9FFF7;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		font-size: 20rpx;
		font-family: Source Han Sans CN-Normal, Source Han Sans CN;
		font-weight: 400;
		color: #04BF79;
	}

	.active {
		background: #E9FFF7;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 1;
		border: 2rpx solid #04BF79;
	}

	.inactive {
		background: #F5F5F5;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 1;
	}
</style>